<template>
  <div class="home-container">
    <!-- 标题区域 -->
    <div class="header">
      <h1>待办清单</h1>
      <p>管理你的所有任务，提高效率</p>
      <!-- 任务数量统计 -->
      <div class="task-count">
        <span>未完成任务：{{ pendingCount }} 个</span>
        <span>已完成任务：{{ completedCount }} 个</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-box">
        <input 
          v-model="searchKey" 
          placeholder="搜索任务名称" 
          class="search-input"
          @input="handleSearch"
        />
        <!-- 搜索结果展示 -->
        <div class="search-result" v-if="showSearchResult">
          <div 
            v-for="task in filteredTasks" 
            :key="task.id" 
            class="result-item"
            @click="goToTaskDetail(task.id)"
            style="cursor: pointer;"
          >
            <div class="result-title">
              {{ task.title }}
              <!-- 状态标签 -->
              <span 
                :class="['status-tag', task.completed ? 'completed' : 'pending']"
              >
                {{ task.completed ? '已完成' : '未完成' }}
              </span>
            </div>
            <div class="result-due">截止日期：{{ task.dueDate }}</div>
          </div>
          <!-- 无结果提示 -->
          <div class="no-result" v-if="filteredTasks.length === 0">
            未找到相关任务
          </div>
        </div>
      </div>
    </div>

    <!-- 功能卡片区域 -->
    <div class="card-container">
      <div class="task-card">
        <h2>我的待办任务</h2>
        <p>查看和管理未完成的任务</p>
        <router-link to="/pending" class="btn">查看待办任务</router-link>
      </div>
      <div class="task-card">
        <h2>已完成任务</h2>
        <p>查看已完成的任务历史</p>
        <router-link to="/completed" class="btn">查看已完成任务</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTaskStore } from '@/store/taskStore'; // 替换为你的 store 路径
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

// 初始化
const taskStore = useTaskStore();
const router = useRouter();

// 响应式数据
const searchKey = ref('');       // 搜索关键词
const showSearchResult = ref(false); // 是否显示搜索结果

// 计算属性（实时获取任务数据）
const pendingCount = computed(() => taskStore.pendingTasks.length);
const completedCount = computed(() => taskStore.completedTasks.length);
const allTasks = computed(() => [...taskStore.pendingTasks, ...taskStore.completedTasks]);

// 搜索过滤逻辑
const filteredTasks = computed(() => {
  if (!searchKey.value) return [];
  return allTasks.value.filter(task => 
    task.title.toLowerCase().includes(searchKey.value.toLowerCase())
  );
});

// 搜索事件处理
const handleSearch = () => {
  showSearchResult.value = searchKey.value.trim() !== '';
};

// 监听搜索框清空
watch(searchKey, (newVal) => {
  if (newVal.trim() === '') {
    showSearchResult.value = false;
  }
});

// 跳转到任务详情页面
const goToTaskDetail = (taskId: string) => {
  router.push(`/task/${taskId}`);
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* 标题区域样式 */
.header {
  margin-bottom: 2rem;
}
.header h1 {
  font-size: 2rem;
  color: #2e67f8;
  margin-bottom: 0.5rem;
}
.header p {
  color: #666;
  margin-bottom: 1rem;
}

/* 任务数量统计 */
.task-count {
  display: flex;
  justify-content: center;
  gap: 2rem;
  color: #444;
  margin-bottom: 1.5rem;
}

/* 搜索框样式 */
.search-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 2rem;
}
.search-input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
}
.search-input:focus {
  border-color: #2e67f8;
}

/* 搜索结果样式 */
.search-result {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.5rem;
  text-align: left;
}
.result-item {
  padding: 1rem;
  border-bottom: 1px solid #f2f2f2;
}
.result-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.status-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #fff;
}
.status-tag.pending {
  background: #f8b42e;
}
.status-tag.completed {
  background: #4caf50;
}
.result-due {
  color: #666;
  margin-top: 0.3rem;
}
.no-result {
  color: #999;
  text-align: center;
  padding: 1rem;
}

/* 功能卡片样式 */
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.task-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.task-card h2 {
  color: #2e67f8;
  margin-bottom: 1rem;
}
.task-card p {
  color: #666;
  margin-bottom: 1.5rem;
}
.btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: #2e67f8;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}
.btn:hover {
  background: #1b48c5;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
  .task-count {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style>